import React,{useState,useEffect} from 'react'
import { Button, Drawer, Form, Input } from 'antd';
import MyNotification from '../../components/MyNotification/MyNotification';
import { $add,$getOne,$update } from '../../api/typeApi'
import ReactQuill from 'react-quill';


export default function AddType({open,setOpen,loadList,roomTypeId,setRoomTypeId}) {
    let [form]=Form.useForm()
    let [notiMsg,setNotiMsg]=useState({type:'',description:''})
    useEffect(()=>{
        
        if(roomTypeId!=0){
            console.log(roomTypeId)
            $getOne({roomTypeId}).then((data)=>{
                form.setFieldsValue(data)
            })
        }
    },[roomTypeId])
    const onClose = () => {
        clear()
        setRoomTypeId(0)
        setOpen(false)
    }
    const onFinish = (values) => {
        console.log("==========================="+values)
        if(roomTypeId){
            $update(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }else{
            $add(values).then(({success,message})=>{
                if(success){
                    setNotiMsg({type:'success',description:message})
                    clear()
                    loadList()
                }else{
                    setNotiMsg({type:'error',description:message})
                }
            })
        }
      };
      const clear=()=>{
        form.resetFields();
      }
  return (
    <>
    <Drawer title={roomTypeId!=0?"修改房型":"添加房型"} width={500} placement='right' onClose={onClose} open={open}>
                <Form
                    name="basic"
                    form={form}
                    labelCol={{
                        span: 4,
                    }}
                    wrapperCol={{
                        span: 18,
                    }}
                    style={{
                        maxWidth: 600,
                    }}
                    // initialValues={{
                    //     remember: true,
                    // }}
                    onFinish={onFinish}
                    // onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item
                        label="房型编号"
                        name="roomTypeId"
                        hidden
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="房型名称"
                        name="roomTypeName"
                        rules={[
                            {
                                required: true,
                                message: '请输入房型名称',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    
                    <Form.Item
                        label="房型价格"
                        name="roomTypePrice"
                        rules={[
                            {
                                required: true,
                                message: '请输入房型价格',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="床位数量"
                        name="bedNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入床位数量',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="房型描述"
                        name="typeDescription"
                        rules={[
                            {
                                required: true,
                                message: '请输入房型描述',
                            },
                        ]}
                    >
                       <ReactQuill
                       className='publish-quill'
                       theme='snow'
                       placeholder='请输入房型描述'
                       />
                    </Form.Item>
                    <Form.Item
                        wrapperCol={{
                            offset: 4,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            {roomTypeId?'修改':'添加'}
                        </Button>
                        <Button onClick={clear} style={{marginLeft:'10px'}}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Drawer>
            <MyNotification notiMsg={notiMsg}/>
    </>
  )
}
